<template>
	<view class="popUContainer">
		<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open" closeable closeOnClickOverlay
			safeAreaInsetBottom>
			<view class="popUp">
				<!--  搜索框 -->
				<view class="search">
					<u-search placeholder="请输入关键字" @search="search"></u-search>
				</view>

				<!--  列表展示 -->
				<view class="pop-up-list">
					<!--  表头  -->
					<u-row customStyle="padding: 0 20rpx">
						<u-col :span="12 / lineList.length" v-for="(item, index) in lineList" :key="index">
							<view class="line">
								<text>{{ item.name }}</text>
							</view>
						</u-col>
					</u-row>
					<!--空数据-->
					<view class="empty" v-if="dataList.length === 0">
						<u-empty mode="search">
						</u-empty>
					</view>

					<!--          列表-->
					<view class="scrollView">
						<u-list @scrolltolower="scrolltolower" showScrollbar height="300rpx">
							<up-list-item v-for="(it, i) in dataList" :key="i">
								<u-row @click="click(it)" customStyle="
                      padding: 5rpx 20rpx;
                      background: linear-gradient(to right, #00a1ffcf, #ABB4FF);
                      border: 1px solid #FDFDFD;
                      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                      border-radius: 15px;
                    ">
									<u-col :span="12 / lineList.length" v-for="(item, index) in lineList" :key="index">
										<view class="col-line">
											<text>{{ it[item.label] }}</text>
										</view>
									</u-col>
								</u-row>
							</up-list-item>
						</u-list>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	/**
	 *   自定义弹窗选择组件
	 *   * @property {Array}    lineList   数据表头 必要的！
	 *   * @property {Array}		dataList		展示的数据 必要的！
	 *   * @property {Boolean}	show	是否展示弹窗 (默认 false )
	 *
	 *   * @event {Function} open 弹出层打开 必要的！
	 *   * @event {Function} close 弹出层收起 必要的！
	 *   * @event {Function} click 选项点击事件
	 *   * @event {Function} scrolltolower 滑动到底事件 必要的！
	 *   * @event {Function} search 搜索事件 必要的！
	 *
	 */

	export default {
		name: "popUp",
		emits: ["open", "close", "click", 'scrolltolower', 'search'],
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			dataList: {
				type: Array,
				default: [],
			},
			lineList: {
				type: Array,
				default: [],
			}
		},
		data() {
			return {
				softList: []
			}
		},

		methods: {
			scrolltolower() {
				this.$emit('scrolltolower')
			},
			close() {
				this.$emit('close')
			},
			open() {
				this.$emit('open')
			},
			click(e) {
				this.$emit('click', e)
			},
			search(e) {
				this.$emit('search', e)
			},

		}

	}
</script>


<style scoped lang="scss">
	.popUContainer {}

	.popUp {
		padding: 80rpx 0 80rpx 0;

	}

	.empty {
		margin: 80rpx 0 0 0 0;
	}

	.scrollView {}

	.pop-up-foot {}

	.line {
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.col-line {
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		text {
			color: whitesmoke;
		}
	}
</style>